<template>
  <div class="main">
    <div class="nav-contain long" >
        <my-nav left="首页" mid="个人信息" right="登出" @toHome='toHome' @toAbout='toAbout' @topChange='topChange'></my-nav>
    </div>
    <button class="nav-btn open-btn " @click="open">
      <i class="fas fa-bars"></i>
    </button>
   <div class="personQuestion seen left-item" >
     <div class="listCard">
       <i class="fas fa-border-all cardIcon cardIconP iconChange" @click="cardViewP"></i>
       <i class="fas fa-list listIcon listIconP" @click="listViewP"></i>
     </div>
     <div class="cardView cardViewP">
       <card v-for="(item,index) in tableData" :key="index" :title="item.title" :receive="item.receive" :id="item.id" :status="item.status"></card>
     </div>
     <div class="listView listViewP notseen">
      <div class="searchOuter" >
        <div class="searchInner">
          <el-input v-model="input" placeholder="输入关键字筛选问卷" style="width:15rem;"></el-input>
          <!--<button class="button">查找</button>-->
        </div>
      </div>
      <div class="questionList" style="width:90%;margin-top:8rem;">
          <el-table
            :data="tableData.filter((x)=>x.title.search(input) != -1)"
            style="width: 100%"
            >
            <el-table-column
              prop="title"
              label="标题"
              sortable
            >
            </el-table-column>
            <el-table-column
              prop="createDate"
              label="创建日期"
              sortable
            >
            </el-table-column>
            <el-table-column
              prop="publish"
              label="发布日期"
              sortable
            >
            </el-table-column>
            <el-table-column
              prop="receive"
              label="回收量"
              sortable
            >
            </el-table-column>
            <el-table-column
              prop="status"
              label="状态"
            >
            </el-table-column>
            <el-table-column
              prop="id"
              label="ID"
              sortable
            >
            </el-table-column>
            <el-table-column label="操作" align="center" width="300">
              <template slot-scope="scope">
                <div style="display:flex;justify-content:space-around;align-items:center;">
                 <!--<i class="fas fa-times iii" @click="deleteQuestion(scope.row.id)" ></i>-->
                 <div class="openOut" :class="{notseen:scope.row.status=='已发布'}" @click="openQuestion(scope.row.status,scope.row.id)">
                   <i class="fas fa-play iii"></i><span>发布</span>
                 </div>
                 <div class="shareOut" :class="{notseen:scope.row.status=='创建'||scope.row.status=='已关闭'}" @click="shareQuestion(scope.row.id)">
                   <i class="fas fa-share-alt iii"></i><span>分享</span>
                 </div>
                 <div class="closeOut" :class="{notseen:scope.row.status=='已关闭'}" @click="closeQuestion(scope.row.status,scope.row.id)" >
                   <i class="fas fa-ban iii"></i><span>关闭</span>
                 </div>
                  <!--<i class="fas fa-chart-line iii" @click="toStatistic(scope.row.id)"></i>-->
                 <div class="previewOut" @click="toPreview(scope.row.id)" >
                   <i class="fas fa-search iii"></i><span>预览</span>
                 </div>
                 <div class="editOut" @click="toEditWithId(scope.row.id)">
                   <i class="fas fa-edit iii"></i><span>编辑</span>
                 </div>
                  <el-dropdown trigger="click" @command="handleCommand">
                    <div class="moreOut">
                      <i class="fas fa-ellipsis-h iii moreF"></i><span>更多操作</span>
                    </div>
                    <el-dropdown-menu>
                        <el-dropdown-item :command="beforeHandleCommand(scope.row.id,'c')">复制</el-dropdown-item>
                        <el-dropdown-item :command="beforeHandleCommand(scope.row.id,'s')">分析</el-dropdown-item>
                        <el-dropdown-item :command="beforeHandleCommand(scope.row.id,'d')">移动到回收站</el-dropdown-item>
                    </el-dropdown-menu>
                  </el-dropdown>
                </div>
              </template>
            </el-table-column>
          </el-table>
      </div>
     </div>
   </div>
  <div class="newQuestion notseen left-item">
      <div style="width:60%;display:flex;justify-content:space-around;align-items:center;padding-top:10rem;">
        <div style="display:flex;flex-direction:column;justify-content:space-around;align-items:center;" @click="toEdit('exam')">
          <svg t="1629685365795" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2262" width="150" height="150"><path d="M746.0352 0l204.8 204.8v764.3648c0 30.2592-24.576 54.8352-54.8352 54.8352h-768c-30.3104 0-54.8352-24.576-54.8352-54.8352V54.784C73.1648 24.576 97.7408 0 128 0h618.0352z" fill="#E34949" p-id="2263"></path><path d="M282.88 796.4672c-6.5536 0-9.8304-6.144-9.8304-9.216s3.2768-9.216 6.5536-9.216c150.4768-58.4704 314.0096-89.1904 474.3168-95.3856v3.072c13.1072 0 29.44-3.072 42.496-3.072v6.144c-163.5328 15.36-323.7888 46.1312-477.5424 92.2624-9.8304 9.216-22.8864 12.288-35.9936 15.36zM671.0784 614.4c-14.9504 0-29.8496-3.4304-38.7584-17.0496-8.96-13.6704-17.92-27.3408-17.92-44.3904 0-47.7696 11.9296-92.16 38.7584-129.6896 23.9104-37.5808 59.648-64.8704 98.4576-81.92 14.848 0 26.8288 10.24 32.768 23.8592-2.9696 3.4304-5.9392 6.8608-8.9088 6.8608 14.848 6.8096 20.8384 20.48 20.8384 37.5296 3.0208 95.5904-50.688 180.8896-125.2352 204.8zM737.28 409.6a89.088 89.088 0 0 0-20.6336 15.0016c-2.9696 0-2.9696-3.0208-2.9696-5.9904-44.1344 26.9824-73.5744 75.008-76.544 125.952 0 6.0416 2.9696 27.0336 11.776 24.064 14.7456-6.0416 26.5216-12.032 35.328-24.064l29.44-32.9728c17.7152-24.0128 29.4912-53.9648 35.328-83.968 5.888-9.0112-2.9184-15.0016-11.776-18.0224z m-443.392 28.4672l-34.7136 17.0496c-3.1744 3.3792-6.3488 3.3792-9.472 3.3792-3.1744 0-3.1744-6.8096-3.1744-10.24 0-10.24 6.2976-17.0496 15.8208-20.48 18.944-17.0496 37.888-30.72 60.0064-40.96 9.472 3.4304 15.8208 13.6704 18.944 23.9104 0 10.24 0 10.24-44.1856 119.5008-15.872 34.0992-28.4672 71.68-31.6416 109.2096 0 3.3792 3.1744 10.24 3.1744 13.6704v3.3792l-3.1744 3.4304c-3.1232 0-6.2976 0-6.2976-3.4304-15.8208 0-28.4672-10.24-31.6416-27.2896 0-27.3408 6.3488-58.0096 15.872-81.92 12.5952-37.5296 31.5392-71.68 50.5344-109.2096z m274.5344 1.1264c6.0416 92.16-45.4144 174.08-124.0576 197.9392-15.1552 0-30.3104-3.3792-39.3728-17.0496-12.0832-10.24-18.1248-27.2896-18.1248-44.3392 0-47.8208 12.0832-92.16 39.3216-129.7408 24.2176-37.5296 60.5184-64.8192 99.84-81.92 15.1552 0 27.2384 10.24 33.28 23.9104-3.0208 3.4304-6.0416 6.8096-9.0624 6.8096 9.1136 10.24 18.176 27.2896 18.176 44.3904z m-35.9936-6.8608a89.3952 89.3952 0 0 0-20.5824 15.0016c-2.9696 0-2.9696-2.9696-2.9696-5.9904-44.1344 27.0336-73.5744 75.008-76.544 126.0032 0 5.9904 2.9696 27.0336 11.776 24.0128 14.7456-5.9904 26.5216-12.032 35.328-24.0128l29.44-32.9728c17.664-24.064 29.44-54.016 35.328-84.0192 5.888-9.0112-2.9184-15.0016-11.776-18.0224z m-298.3424 302.7968c150.528-60.0576 314.0096-91.648 474.3168-97.9968v3.1744c16.384 0 29.44-3.1744 42.496-3.1744v6.3488A2407.8848 2407.8848 0 0 0 273.408 738.304a162.4064 162.4064 0 0 1-35.9936 12.6464h-3.2768c-3.2768 0-6.5536-3.1744-6.5536-9.472l6.5536-6.3488z" fill="#FFFFFF" p-id="2264"></path><path d="M950.8352 204.6976h-146.176c-32.256 0-58.4704-26.1632-58.5216-58.4704V0c19.3536 2.3552 37.4784 11.1104 51.3536 25.088l128.3072 128.256c13.9264 13.9264 22.6816 32.0512 25.088 51.3536h-0.0512z" fill="#FF9595" p-id="2265"></path></svg>
          <h3 class="questionClass">考试问卷</h3>
        </div>
        <div style="display:flex;flex-direction:column;justify-content:space-around;align-items:center;" @click="toEdit('normal')">
          <svg t="1629685828553" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3094" width="150" height="150"><path d="M813.34 249.8c-61.78 0-110.82-49.04-110.82-110.82V64H213.96c-42.44 0-74.98 32.54-74.98 74.98v746.04c0 42.44 32.54 74.98 74.98 74.98h596.08c42.44 0 74.98-32.54 74.98-74.98V249.8h-71.68zM429 239.9c19.33-19.33 52.35-29.24 94.32-29.24 32.54 0 58.48 6.6 78.28 19.33 25.94 19.33 42.44 45.74 42.44 74.98 0 13.2-3.3 25.94-9.9 35.84-6.6 13.2-22.64 25.94-42.44 42.44-16.51 13.2-25.94 22.64-29.24 29.24-3.3 6.6-6.6 16.51-6.6 29.24h-84.88v-9.9c0-13.2 3.3-25.94 6.6-35.84 3.3-9.9 9.9-16.51 16.51-25.94 6.6-6.6 22.64-19.33 45.74-39.14 13.2-9.9 19.33-19.33 19.33-25.94 0-9.9-3.3-16.51-6.6-19.33-6.6-3.3-13.2-6.6-22.64-6.6-9.9 0-19.33 3.3-25.94 9.9-6.6 6.6-13.2 19.33-13.2 35.84l-88.19-9.9c-6.13-29.24 6.61-52.35 26.41-74.98z m126.86 228.24v81.58h-91.01v-81.58h91.01z m153.26 341.9H334.21c-19.33 0-35.84-16.51-35.84-35.84 0-19.33 16.51-35.84 35.84-35.84h374.91c19.33 0 35.84 16.51 35.84 35.84 0 16.5-16.51 35.84-35.84 35.84z m0-114.12H334.21c-19.33 0-35.84-16.51-35.84-35.84 0-19.33 16.51-35.84 35.84-35.84h374.91c19.33 0 35.84 16.51 35.84 35.84 0 19.8-16.51 35.84-35.84 35.84z" fill="#3F87FF" p-id="3095"></path><path d="M810.04 174.82h74.98L770.9 64v74.98c0 19.34 19.8 35.84 39.14 35.84z" fill="#3F87FF" p-id="3096"></path></svg>
          <h3 class="questionClass">普通问卷</h3>
        </div>
        <div style="display:flex;flex-direction:column;justify-content:space-around;align-items:center;" @click="toEdit('vote')">
          <svg t="1629685996033" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3242" width="150" height="150"><path d="M895.946667 734.048l1.066666 1.013333a29.824 29.824 0 0 1 0 43.413334l-162.261333 152.96a31.925333 31.925333 0 0 1-22.762667 8.704 31.925333 31.925333 0 0 1-22.773333-8.704l-93.184-87.84a29.824 29.824 0 0 1 0-43.413334l1.077333-1.013333a32 32 0 0 1 43.904 0l70.976 66.901333 140.053334-132.021333a32 32 0 0 1 43.904 0zM768 85.333333c64.8 0 117.333333 52.533333 117.333333 117.333334v394.666666a32 32 0 0 1-64 0V202.666667a53.333333 53.333333 0 0 0-53.333333-53.333334H256a53.333333 53.333333 0 0 0-53.333333 53.333334v618.666666a53.333333 53.333333 0 0 0 53.333333 53.333334h234.666667a32 32 0 0 1 0 64H256c-64.8 0-117.333333-52.533333-117.333333-117.333334V202.666667c0-64.8 52.533333-117.333333 117.333333-117.333334zM554.666667 544a32 32 0 0 1 0 64H341.333333a32 32 0 0 1 0-64z m128-170.666667a32 32 0 0 1 0 64H341.333333a32 32 0 0 1 0-64z" fill="#f2e70c" p-id="3243"></path></svg>
          <h3 class="questionClass">投票问卷</h3>
        </div>
        <div style="display:flex;flex-direction:column;justify-content:space-around;align-items:center;" @click="toEdit('limit')">
          <svg t="1629686174168" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3721" width="140" height="140"><path d="M453.081791 881.786269v120.44991h118.203224l342.535642-352.233075-118.35606-120.602746-342.390448 352.393552z m550.889075-368.204418l-71.190926-72.535881c-12.394985-12.685373-31.346627-12.685373-43.73397 0l-56.121313 57.160597 118.210865 120.602746 52.682508-60.599403c12.242149-12.685373 12.242149-32.240716 0.152836-44.628059z" fill="#1b37df" p-id="3722"></path><path d="M352.179582 929.547463H144.720239c-29.703642 0-53.882269-25.668776-53.882269-57.160597V147.608836c0-31.484179 24.178627-57.160597 53.874627-57.160597h648.956179c29.703642 0 53.882269 25.676418 53.882269 57.160597v184.480477c0 24.927522 19.555343 45.224119 43.581134 45.22412 24.033433 0 43.581134-20.296597 43.581134-45.22412v-184.472835C934.713313 66.26197 871.439284 0 793.829254 0H144.712597C66.957373 0 3.820896 66.269612 3.820896 147.608836v724.77803c0 81.49206 63.281672 147.616478 140.899343 147.616477h207.459343c24.025791 0 43.581134-20.304239 43.581134-45.224119 0-24.927522-19.555343-45.224119-43.581134-45.22412z" fill="#1b37df" p-id="3723"></path><path d="M743.821373 256.420299c0-24.927522-19.555343-45.224119-43.581134-45.22412H233.525493c-24.033433 0-43.588776 20.296597-43.588777 45.22412 0 24.919881 19.562985 45.224119 43.588777 45.224119h466.714746c24.025791 0 43.581134-20.304239 43.581134-45.224119zM416.355343 587.011821H233.533134c-24.033433 0-43.588776 20.304239-43.588776 45.224119 0 24.927522 19.562985 45.224119 43.588776 45.22412h182.829851c24.033433 0 43.581134-20.296597 43.581134-45.22412 0-24.919881-19.547701-45.224119-43.581134-45.224119zM233.533134 392.83391c-24.033433 0-43.588776 20.304239-43.588776 45.22412 0 24.927522 19.562985 45.224119 43.588776 45.224119h322.086209c24.033433 0 43.581134-20.296597 43.581135-45.224119 0-24.919881-19.547701-45.224119-43.581135-45.22412H233.525493z" fill="#1b37df" p-id="3724"></path></svg>
          <h3 class="questionClass">报名问卷</h3>
        </div>
        <div style="display:flex;flex-direction:column;justify-content:space-around;align-items:center;" @click="toEdit('pos')">
          <svg t="1630245578561" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1282" width="150" height="150"><path d="M736.4096 274.944c-17.6128 0-31.9488-14.2848-31.9488-31.9488V130.2528c0-17.6128 14.2848-31.9488 31.9488-31.9488 17.6128 0 31.9488 14.2848 31.9488 31.9488v112.7424c-0.0512 17.664-14.336 31.9488-31.9488 31.9488z" fill="#505587" p-id="1283"></path><path d="M802.9184 156.5184v86.528c0 36.6592-29.8496 66.5088-66.5088 66.5088s-66.5088-29.8496-66.5088-66.5088V156.0576H369.1008v86.9376c0 36.6592-29.8496 66.5088-66.5088 66.5088s-66.5088-29.8496-66.5088-66.5088V156.2112c-69.5296 2.816-125.0304 60.0576-125.0304 130.304v116.8384h812.1344V286.5152c0-68.6592-52.992-124.8256-120.2688-129.9968zM111.0528 468.5312v326.7072c0 72.0384 58.368 130.4064 130.4064 130.4064h551.3216c72.0384 0 130.4064-58.368 130.4064-130.4064V468.5312H111.0528z m576.4608 148.5824l-202.8544 166.144a50.68288 50.68288 0 0 1-32 11.4176c-2.7136 0-5.376-0.2048-8.0896-0.6656a50.4576 50.4576 0 0 1-34.6624-22.9376l-79.9232-126.72c-9.0624-14.336-4.7616-33.3312 9.5744-42.3936s33.3312-4.7616 42.3936 9.5744l73.3696 116.2752 193.3312-158.3104a30.70976 30.70976 0 0 1 43.2128 4.3008c10.7008 13.2096 8.8064 32.5632-4.352 43.3152z" fill="#505587" p-id="1284"></path><path d="M302.592 274.944c-17.6128 0-31.9488-14.2848-31.9488-31.9488V130.2528c0-17.6128 14.2848-31.9488 31.9488-31.9488 17.6128 0 31.9488 14.2848 31.9488 31.9488v112.7424c-0.0512 17.664-14.336 31.9488-31.9488 31.9488z" fill="#505587" p-id="1285"></path></svg>
          <h3 class="questionClass">疫情打卡</h3>
        </div>
      </div>
   </div>
   <div class="trash notseen left-item" >
    <div class="listCard">
       <i class="fas fa-border-all cardIcon cardIconT iconChange" @click="cardViewT"></i>
       <i class="fas fa-list listIcon listIconT" @click="listViewT"></i>
    </div>
    <div class="cardView cardViewT">
      <card-trash v-for="(item,index) in trashData" :key="index" :title="item.title" :receive="item.receive" :id="item.id" :status="item.status"></card-trash>
    </div>
    <div class="listView listViewT notseen">
        <div class="searchOuter">
        <div class="searchInner">
          <el-input v-model="input" placeholder="输入关键字筛选问卷" style="width:15rem;"></el-input>
          <!--<button class="button">查找</button>-->
        </div>
      </div>
      <div style="width:90%;margin-top:8rem;">
          <el-table
            :data="trashData.filter((x)=>x.title.search(input) != -1)"
            style="width: 100%"
            >
            <el-table-column
              prop="title"
              label="标题"
              sortable
            >
            </el-table-column>
            <el-table-column
              prop="createDate"
              label="创建日期"
              sortable
            >
            </el-table-column>
            <el-table-column
              prop="publish"
              label="发布日期"
              sortable
            >
            </el-table-column>
            <el-table-column
              prop="receive"
              label="回收量"
              sortable
            >
            </el-table-column>
            <el-table-column
              prop="status"
              label="状态"
            >
            </el-table-column>
            <el-table-column
              prop="id"
              label="ID"
              sortable
            >
            </el-table-column>
            <el-table-column label="操作" align="center" width="300">
              <template slot-scope="scope">
                <div style="display:flex;justify-content:space-around;align-items:center;">
                  <div class="recoverOut" @click="recoverQuestion(scope.row.id)">
                    <i class="fas fa-times iii" ></i><span>恢复</span>
                  </div>
                  <div class="previewOut" @click="toPreview(scope.row.id)">
                    <i class="fas fa-search iii"></i><span>预览</span>
                  </div>
                  <el-dropdown trigger="click" @command="handleCommand">
                    <div class="moreOut">
                      <i class="fas fa-ellipsis-h iii"></i><span>更多操作</span>
                    </div>
                    <el-dropdown-menu>
                        <el-dropdown-item :command="beforeHandleCommand(scope.row.id,'s')">分析</el-dropdown-item>
                    </el-dropdown-menu>
                  </el-dropdown>
                </div>
              </template>
            </el-table-column>
          </el-table>
      </div>
    </div>
   </div>
   <div class="left-contain visible">
    <div class="nav nav-black visible">
      <div class="nav nav-red visible">
        <div class="nav nav-white visible">
          <button class="nav-btn close-btn" @click="close">
            <i class="fas fa-times"></i>
          </button>       
              <i class="fas fa-plus ii i1" style="margin-top:5rem;" @click="newQuestion">新建问卷</i>
              <i class="fas fa-file-alt i2 ii change" @click="personQuestion">个人问卷</i>
              <i class="fas fa-trash-alt i3 ii" style="margin-bottom:5rem;" @click="trash">回收站</i>
        </div>
      </div>
    </div>
   </div>
  </div>
</template>

<script>
// @ is an alias to /src

import cookie from 'cookie'
import Questionnaire from '@/api/Questionnaire.js'
import MyNav from '../components/MyNav.vue';
import card from '../components/card.vue';
import cardTrash from '../components/cardTrash.vue'
export default {
  name: 'Manage',
  components: {
    MyNav,
    card,
    cardTrash,
  },
  data:function(){
    return{
      input:'',
      selectValue:'标题',
      options:[
        {
          value:'创建时间',
        },
        {
          value:'标题',
        },
        {
          value:'ID',
        }
      ],
      trashData:[
         
      ],
      tableData:[
        
      ]
    }
  },
  created(){

  },
  mounted:function(){
    var uid = cookie.parse(document.cookie).uid
    this.trashData.length=0;
    this.tableData.length=0;
    this.axios.get('/questionnaire/list?uid=' + uid +"&page=0&pageSize=1024")
    .then(response=>{
      console.log("test in getlist,uid:"+uid);
      console.log(response.data);
      console.log(response.data.data);
      response.data.data.forEach(item=>{
        var tmp = {}
        tmp.title=item.title
        tmp.createDate=(new Date(item.created)).toLocaleString()
        console.log(item.status);
        if(item.status=='CREATED'){
          tmp.status='创建';
        }else if(item.status=='PUBLISHED'){
          tmp.status='已发布';
        }else if(item.status=='CLOSED'){
          tmp.status='已关闭';
        }else{
          tmp.status='hhh';
        }
        tmp.receive=item.receiveCnt
        tmp.id=item.id;
        tmp.publish=item.published ? (new Date(item.published)).toLocaleString() : ""
        if(item.inTrash){
          this.trashData.push(tmp);
        }
        else
        this.tableData.push(tmp);
      })
      console.log(JSON.stringify(this.tableData))
    })
    .catch(error=>{
      console.log(error);
      console.log('请求数据失败！');
    })
        this.axios.get('/questionnaire/listInTrash?uid=' + uid +"&page=0&pageSize=1024")
    .then(response=>{
      console.log("test in getlist,uid:"+uid);
      console.log(response.data);
      console.log(response.data.data);
      response.data.data.forEach(item=>{
        var tmp = {}
        tmp.title=item.title
        tmp.createDate=(new Date(item.created)).toLocaleString()
        if(item.status==0){
          tmp.status='创建';
        }else if(item.status==1){
          tmp.status='已发布';
        }else if(item.status==2){
          tmp.status='已关闭';
        }
        tmp.receive=item.receiveCnt
        tmp.id=item.id;
        tmp.publish=item.published ? (new Date(item.published)).toLocaleString() : ""
        if(item.inTrash){
          this.trashData.push(tmp);
        }
        else
        this.tableData.push(tmp);
      })
      console.log(JSON.stringify(this.tableData))
    })
    .catch(error=>{
      console.log(error);
      console.log('请求数据失败！');
    })
  },
  methods:{
    beforeHandleCommand(id,command){   //更多操作
            return {
            'id': id,
            'command':command,
        }
    },
    handleCommand(command){
      console.log('handle '+command.command);
      switch(command.command){
        case "e"://导出

            break;
        case "d"://删除
            this.deleteQuestion(command.id);
            break;
        case "s"://分析
            this.toStatistic(command.id);
            break;
        case "c"://复制
            this.copyQuestion(command.id);
            break;
      }
    },
    copyQuestion:function(id){
      this.axios.get('/questionnaire/copy?qnid=' + id)
      .then(response=>{
        if(response.data.code==200){
          location.reload();
          this.$message("复制成功！");
        }else{
          this.$message(response.data.msg+" 复制失败！");
        }
      })
      .catch(error=>{
        this.$message(error+" 复制失败！");
      })
    },
    shareQuestion:function(id){
      console.log(id);
          this.$router.push("/share/" + id);
    },
    totalDeleteQuestion:function(id){
         this.$confirm('确定彻底删除吗？删除后将无法恢复','提示',{
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type:"warning",
            })
            .then(()=>{
                        this.axios.delete('/questionnaire/remove?qnid=' + id)
        .then(response=>{
          if(response.data.code===200){
                    console.log('delete'+id);
                    //删除id对应的对象
                    this.tableData.forEach((item,index,arr)=>{
                      if(item.id === id){
                        arr.splice(index,1);
                        this.trashData.push(item);
                      }
                    });
                  this.$message.success("删除成功！");
          }else{
            this.$message.error(response.data.msg+" 删除失败！");
          }
          console.log(response.data.msg);
        })
        .catch(error=>{
          this.$message.error(error+" 删除失败！");
        })
            })
    },
    openQuestion:function(status,id){
      if(status==='已发布'){
        this.$alert('该问卷已发布',{confirmButtonText: '确定',})
        return;
      }
      Questionnaire.publish(id)
      .then(response=>{
        if(response.data.code===200){
          this.tableData.forEach((item)=>{
                      if(item.id === id){
                       item.status='已发布';
                      }
                    });
          this.$message.success("发布成功！");
          this.$router.push("/share/" + id);
        }else{
          this.$message.error(response.data.msg+" 发布失败！");
        }
      })
      .catch(error=>{
        this.$message.error(error+" 发布失败！");
      })
    },
    closeQuestion:function(status,id){
        if(status==='已关闭'){
        this.$alert('该问卷已关闭',{confirmButtonText: '确定',})
        return;
      }
      this.axios.post('/questionnaire/close?qnid=' + id)
      .then(response=>{
        if(response.data.code===200){
          this.tableData.forEach((item)=>{
                      if(item.id === id){
                       item.status='已关闭';
                      }
                    });
                  this.$message.success("关闭成功！");
        }else{
          this.$message.error(response.data.msg+" 关闭失败！");
        }
      })
      .catch(error=>{
        this.$message.error(error+" 关闭失败！");
      })
    },
    deleteQuestion:function(id){
              this.$confirm('确定删除吗？','提示',{
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type:"warning",
            })
            .then(()=>{
                        this.axios.delete('/questionnaire/remove?qnid=' + id)
        .then(response=>{
          if(response.data.code===200){
                    console.log('delete'+id);
                    //删除id对应的对象
                    this.tableData.forEach((item,index,arr)=>{
                      if(item.id === id){
                        arr.splice(index,1);
                        this.trashData.push(item);
                      }
                    });
                    location.reload();
                  this.$message.success("删除成功！");
          }else{
            this.$message.error(response.data.msg+" 删除失败！");
          }
          console.log(response.data.msg);
        })
        .catch(error=>{
          this.$message.error(error+" 删除失败！");
        })
            })
    },
    recoverQuestion:function(id){
      this.axios.post('/questionnaire/restore?qnid=' + id)
      .then(response=>{
        if(response.data.code===200){
      console.log('recover'+id);
      this.trashData.forEach((item,index,arr)=>{
        if(item.id===id){
          arr.splice(index,1);
          this.tableData.push(item);
        }
      })
      location.reload();
          this.$message.success("恢复成功！");
        }else{
          this.$message.error(response.data.msg+"恢复失败！");
        }
        console.log("message  "+response.data.msg);
      })
      .catch(error=>{
        this.$message.error(error+" 恢复失败！");
      })
    },
    tableAddClassName({rowIndex}){
        if(rowIndex===1)
        return 'received';
        return '';
    },
    newQuestion:function(){
      const i1=document.querySelector('.i1');
      i1.classList.add('change');
      const i2=document.querySelector('.i2');
      const i3=document.querySelector('.i3');
      i2.classList.remove('change');
      i3.classList.remove('change');
      const t1=document.querySelector('.newQuestion');
      t1.classList.remove('notseen');
      t1.classList.add('seen');
      const t2=document.querySelector('.personQuestion');
      t2.classList.remove('seen');
      t2.classList.add('notseen');
      const t3=document.querySelector('.trash');
      t3.classList.remove('seen');
      t3.classList.add('notseen');
    },
    personQuestion:function(){
      const i2=document.querySelector('.i2');
      i2.classList.add('change');
      const i1=document.querySelector('.i1');
      const i3=document.querySelector('.i3');
      i1.classList.remove('change');
      i3.classList.remove('change');
      const t1=document.querySelector('.personQuestion');
      t1.classList.remove('notseen');
      t1.classList.add('seen');
      const t2=document.querySelector('.newQuestion');
      t2.classList.remove('seen');
      t2.classList.add('notseen');
      const t3=document.querySelector('.trash');
      t3.classList.remove('seen');
      t3.classList.add('notseen');
    },
    trash:function(){
      const i3=document.querySelector('.i3');
      i3.classList.add('change');
      const i2=document.querySelector('.i2');
      const i1=document.querySelector('.i1');
      i2.classList.remove('change');
      i1.classList.remove('change');
      const t1=document.querySelector('.trash');
      t1.classList.remove('notseen');
      t1.classList.add('seen');
      const t2=document.querySelector('.personQuestion');
      t2.classList.remove('seen');
      t2.classList.add('notseen');
      const t3=document.querySelector('.newQuestion');
      t3.classList.remove('seen');
      t3.classList.add('notseen');
    },
    toHome:function(){
      this.$router.push('/home');
    },
    toLogin:function(){
      this.$router.push('/login');
    },
    toRegister:function(){
      this.$router.push('/register');
    },
    toAbout:function(){//去个人信息界面
      this.$router.push('/personData');
    },
    toEditWithId:function(id){
      console.log("toEditWithID");
      this.$router.push("/edit/"+id);
    },
    toEdit:function(type){
      console.log("toEdit");
      this.$router.push('/edit?type='+type);
    },
    toStatistic:function(id){
      console.log("toStatistic");
      this.$router.push({path:'/statistics',query:{id:id}});
    },
     toPreview:function(id){
      console.log(id);
        this.$router.push("/edit/"+id+ "?preview=true");
    },
    close:function(){
        const nav = document.querySelectorAll('.nav');
        const p=document.querySelector('.personQuestion');
        const p1=document.querySelector('.newQuestion');
        const p2=document.querySelector('.trash'); 
        p.classList.add('wide');
        p1.classList.add('wide');
        p2.classList.add('wide');
        const opnebtn=document.querySelector('.open-btn');
        opnebtn.classList.add('shown');
        nav.forEach(nav_el => nav_el.classList.remove('visible'));
    },
    open:function(){
        const nav = document.querySelectorAll('.nav');
        const p=document.querySelector('.personQuestion');
        const p1=document.querySelector('.newQuestion');
        const p2=document.querySelector('.trash'); 
        const opnebtn=document.querySelector('.open-btn');
        opnebtn.classList.remove('shown');
        p.classList.remove('wide');
        p1.classList.remove('wide');
        p2.classList.remove('wide');
        nav.forEach(nav_el => nav_el.classList.add('visible'));
    },
    topChange:function(){
      console.log('topchange');
      const top=document.querySelector('.nav-contain');
      if(top.className.indexOf('short')!==-1){
        top.classList.remove('short');
        top.classList.add('long');
      }else{
        top.classList.remove('long');
        top.classList.add('short');
      }
    },
    cardViewP:function(){
      const cardIcon=document.querySelector('.cardIconP');
      cardIcon.classList.add('iconChange');
      const listIcon=document.querySelector('.listIconP');
      listIcon.classList.remove('iconChange');
      const listView=document.querySelector('.listViewP');
      listView.classList.add('notseen');
      const cardView=document.querySelector('.cardViewP');
      cardView.classList.remove('notseen');
    },
    cardViewT:function(){
      const cardIcon=document.querySelector('.cardIconT');
      cardIcon.classList.add('iconChange');
      const listIcon=document.querySelector('.listIconT');
      listIcon.classList.remove('iconChange');
      const listView=document.querySelector('.listViewT');
      listView.classList.add('notseen');
      const cardView=document.querySelector('.cardViewT');
      cardView.classList.remove('notseen');
    },
    listViewP:function(){
      const cardIcon=document.querySelector('.cardIconP');
      cardIcon.classList.remove('iconChange');
      const listIcon=document.querySelector('.listIconP');
      listIcon.classList.add('iconChange');
      const listView=document.querySelector('.listViewP');
      listView.classList.remove('notseen');
      const cardView=document.querySelector('.cardViewP');
      cardView.classList.add('notseen');
    },
    listViewT:function(){
      const cardIcon=document.querySelector('.cardIconT');
      cardIcon.classList.remove('iconChange');
      const listIcon=document.querySelector('.listIconT');
      listIcon.classList.add('iconChange');
      const listView=document.querySelector('.listViewT');
      listView.classList.remove('notseen');
      const cardView=document.querySelector('.cardViewT');
      cardView.classList.add('notseen');
    },
  },
}
</script>
<style scoped>
@import url('https://fonts.googleapis.com/css?family=Muli&display=swap');

* {
  box-sizing: border-box;
}
.button{
  cursor:pointer;
  color:white;
  width:6rem;
  height:2.5rem;
  border:none;
  border-radius: 0.3rem;
  background:#7e57c2;
  font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
  font-size:1rem;
}
.button:hover{
  background:#673ab7;
}
.iii:hover{
  color:#8e24aa;
}
.questionClass{
  cursor: pointer;
  margin-top:0.5rem;
}
.questionClass:hover{
  color:#3f51b5;
}
i{
  cursor:pointer;
}
.seen{
  transition: all 0.6s ease-in-out;
  margin-left: 10vw;
  margin-top:0;
  width:90vw;
  display:flex;
  justify-content:space-around;
  align-items:center;
  flex-direction:column;
}
.ii:hover{
  color:#5e35b1;
}
.change{
  color:#5e35b1;
}
.main {
  font-family: 'Muli', sans-serif;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.contain{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
  max-width: 300px;
}
.nav-btn {
  border: none;
  background-color: transparent;
  cursor: pointer;
  font-size: 20px;
}

.open-btn {
  position: fixed;
  top: 45vh;
  left: 0.3rem;
  z-index: 1;
  transform: translateX(-100%);
  transition: all 1s ease-in-out;
}
.shown{
  transform: translateX(0);
}
.left-contain{
  margin: 0;
  position: fixed;
  top:15vh;
  left:0;
  height:85vh;
  width:10vw;
  display:flex;
  align-items: center;
}
.nav {
  height: 85vh;
  width:10vw;
  transform: translateX(-100%);
  transition: transform 0.4s ease-in-out;
  z-index:1;
}

.nav.visible {
  transform: translateX(0);
}

.nav-black {
  background-color: #4527a0;
  transition-delay: 0.3s;
}
.nav-black.visible {
  transition-delay: 0s;
}

.nav-red {
  background-color:#673ab7;
  width: 95%;
  transition-delay: 0.1s;
}

.nav-red.visible {
  transition-delay: 0.1s;
}

.nav-white {
  background-color: #fff;
  width: 95%;
  position: relative;
  transition-delay: 0s;
  display: flex;
  justify-content: space-around;
  align-items: center;
  flex-direction: column;
}

.nav-white.visible {
  transition-delay: 0.5s;
}

.close-btn {
  opacity: 0.3;
  position: absolute;
  top: 40px;
  right: 30px;
}
.nav-contain{
  height:15vh;width:100vw;display:flex;justify-content:space-around;align-items:center;
  background-image:url('../assets/survey2.jpg') ;
  background-size: cover;
  opacity: 0.8;
}
.searchOuter{
  width:60%;display:flex;flex-direction:column;justify-content:space-around;align-items:center;
}
.searchInner{
  width:80%;display:flex;justify-content:space-around;align-items:center;
}
.listCard{
  height: 3rem;
  width: 100%;
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.cardIcon{
  margin-left: auto;
  cursor: pointer;
}
.listIcon{
  cursor: pointer;
  margin-right: 2rem;
  margin-left:1rem;
}
.iconChange{
  color:#2196f3;
}
.listView{
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
}
.cardView{
  padding-left:3rem ;
  width:100%;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}
svg{
  cursor: pointer;
}
span{
    display:none;
    font-size: 0.9rem;
    font-weight:700;
    cursor: pointer;
}
.previewOut,.editOut,.moreOut,.recoverOut,.openOut,.shareOut,.closeOut{
    display: flex;
    justify-content: center;
    align-items: center;
}
.previewOut:hover,.editOut:hover,.moreOut:hover,.recoverOut:hover,.openOut:hover,.shareOut:hover,.closeOut:hover{
  color:#5e35b1;
}
.previewOut:hover span{
    display:flex;
}
.editOut:hover span{
    display: flex;
}
.moreOut:hover span{
    display: flex;
}
.recoverOut:hover span{
  display: flex;
}
.openOut:hover span{
  display:flex;
}
.shareOut:hover span{
  display: flex;
}
.closeOut:hover span{
  display: flex;
}
.notseen{
  display: none;
}
.wide{
  margin-left:0;
  width: 100vw;
  transition: all 0.7s ease-in-out;
}
.short{
  height:5vh;
  transition: all 0.7s ease-in-out;
}
.long{
  height:15vh;
  transition: all 0.7s ease-in-out;
}
</style>
